<template>
	
	<view class="container" :style="'background: #FFF;padding-bottom:260rpx;'">
		<loading v-if="loading"></loading>
		<view v-else style="width:100%;">
		
		<!-- 自定义导航栏 -->
		<view class="top-box">
			<view :style="'height:' + statusBarHeight + 'px'"/>
			<view class="navTopBox" :style="'height:' + navBarHeight + 'px;'">
				<view class="left-button-box" :style="'height:' + menuButtonInfo.height + 'px;'">
					<image @click="tapToBack('back')" src="../../static/back.png" mode="aspectFill"></image>
					<view class="line"></view>
					<image src="../../static/detail/home.png" mode="aspectFill" @click="tapToBack('index')"></image>
				</view>
				<view class="right-button-box">
					抢购详情
				</view>
			</view>
		</view>
		
		<!-- banner -->
		<view class="banner" :style="'padding-top:' + paddTop + 'px'">
			<swiper  v-if="store.productMainImage" class="swiper" :autoplay="true" duration="500" :circular="true">
				<swiper-item v-for="(item,index) in store.productMainImage" :key="index">
					<view class="item">
						<image :src="item?item:'../../static/lazy_detail.png'" class="img" mode="aspectFill" @click="imagePreview(index,store.productMainImage)"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<swiper v-else class="swiper" :autoplay="true" duration="500" :circular="true">
				<swiper-item v-for="(item,index) in posterArr" :key="index">
					<view class="item">
						<image :src="item" class="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 倒计时信息 -->
		<view class="title">
			<image src="https://imgs.ynz666.com/test/2024/09/19/OTU3YTU3ODJjNTQ1NDdkYTVlNTkzZjY0MzRhYjYxOTA=.png" mode="aspectFill" class="backgImg_img"></image>
			<!-- discountStatus 0未开始notBegin  1正在进行中proceed 2已结束 finish -->
			<view class="title_box">
				<view class="left">
					<view class="left_view1" v-if="store.discountStatus==0">
						<text>开始倒计时：</text>>
						<uni-countdown splitorColor="#ffffff" color="#ffffff" :show-day="false" :second="store.timeStart/1000" @timeup="timeOut()" />
					</view>
					<view class="left_view1" v-if="store.discountStatus==1">
						<text>结束倒计时：</text>
						<uni-countdown :show-day="false" splitorColor="#ffffff" color="#ffffff" :second="store.timeEnd/1000" @timeup="timeOut()" />
					</view>
					<view class="left_view1" v-if="store.discountStatus==2">
						<text>此抢购品已结束抢购</text>
					</view>
					<view class="left_view2" v-if="store.discountStatus==1">
						当前需要券数：{{minPriceNum}}
					</view>
					
					
					
				</view>
				<view class="right">
					<view class="right_view1">
						抢购未成功免单券自动退还
					</view>
					<view class="right_view2" v-if="store.discountStatus==0">
						暂未抢购
					</view>
					<view class="right_view2" v-if="store.discountStatus==1" @click="openMask">
						立即抢购
					</view>
					<view class="right_view2" v-if="store.discountStatus==2">
						已结束
					</view>
				</view>
				
				<!-- 抢购中 -->
				<image src="https://imgs.ynz666.com/test/2024/10/12/YjM1NGVkYmViZDcxZDVjODZjNWNhODA2Y2M1NjFiYjg=.png" mode="aspectFill" class="dw" v-if="store.discountStatus==0"></image>
				<image src="https://imgs.ynz666.com/test/2024/10/12/OWMwZTQ1Y2RmMmViMzlhMjZhOTdhOGU0NTkyMmIyMTQ=.png" mode="aspectFill" class="dw" v-if="store.discountStatus==1"></image>
				<image src="https://imgs.ynz666.com/test/2024/09/24/ZjU1NTRhNGQ3ZGZkYTM2ODk2N2UyMDZjMDUyZWQ2NmM=.png" mode="aspectFill" class="dw" v-if="store.discountStatus==2"></image>
				
			</view>
		</view>
		
		<!-- 商品信息 -->
		<view class="message">
			<view class="message_box">
				<view class="mes_title">
					抢购品｜{{store.productName}}
				</view>
				<view class="mes_con">
					<view class="con_item">
						<view class="view1">
							¥{{store.productMarketPrice}}
						</view>
						<view class="view2">
							市场售价
						</view>
					</view>
					<view class="segmentation"></view>
					<view class="con_item">
						<view class="view1">
							{{store.mBasePrice}}
						</view>
						<view class="view2">
							初始抢购积分
						</view>
					</view>
					<view class="segmentation"></view>
					<view class="con_item">
						<view class="view1" v-if="store.discountStatus==0">
							待抢购
						</view>
						<view class="view1" v-if="store.discountStatus!=0">
							{{minPriceNum}}
						</view>
						<view class="view2">
							当前抢购使用积分
						</view>
					</view>
				</view>
				<view class="mes_fot">
					<view class="left">
						<view class="view1" v-if="store.discountStatus==0">
							待抢购
						</view>
						<view class="view1" v-if="store.discountStatus==1&&store.finalPrice==0">
							{{store.mBasePrice}}
						</view>
						<view class="view1" v-if="store.discountStatus==1&&store.finalPrice!=0">
							{{store.finalPrice}}+{{store.mMinBidPrice}}
						</view>
						<view class="view1" v-if="store.discountStatus==2">
							已结束
						</view>
						<view class="view2">
							当前阶段每次加拍最少加拍免单券数
						</view>
					</view>
					<view class="right" @click="openranking()" v-if="store.discountStatus!=0">
						查看抢购排名
					</view>
				</view>
			</view>
		</view>
		
		<!-- 抢购信息 -->
		<view class="auctmes">
			<view class="auctmes_box">
				<view class="item">
					<view class="item_top">
						当前我的排名
					</view>
					<view class="item_bot" v-if="store.discountStatus==0">
						待抢购
					</view>
					<view class="item_bot" v-if="store.discountStatus==1&&store.isJoin">
						第{{store.rank}}位
					</view>
					<view class="item_bot" v-if="store.discountStatus==1&&!store.isJoin">
						未参与
					</view>
					<view class="item_bot" v-if="store.discountStatus==2">
						已结束
					</view>
					
					
				</view>
				<view class="item">
					<view class="item_top">
						本场抢购时间
					</view>
					<view class="item_bot">
						{{store.auctionTime}}
					</view>
				</view>
				<!-- <view class="item">
					<view class="item_top">
						最后抢购次数
					</view>
					<view class="item_bot" v-if="store.discountStatus==0">
						待抢购
					</view>
					<view class="item_bot" v-if="store.discountStatus!=0">
						{{store.lastBidCount}}次
					</view>
					
				</view> -->
				<view class="item">
					<view class="item_top">
						本次抢购品使用时间
					</view>
					<view class="item_bot">
						每天可用
					</view>
					
				</view>
				<view class="item">
					<view class="item_top">
						抢购规则
					</view>
					<view class="item_bot item_bot2" @click="openRule()">
						点击查看
					</view>
				</view>
				<view class="item">
					<view class="item_top">
						抢购项目
					</view>
					<view class="item_bot">
						{{store.productName}}
					</view>
				</view>
				<view class="item">
					<view class="item_top">
						本次抢购人数
					</view>
					<view class="item_bot" v-if="store.discountStatus==0">
						待抢购
					</view>
					<view class="item_bot" v-if="store.discountStatus!=0">
						{{store.numberOfParticipants}}人
					</view>
				</view>
			</view>
		</view>
		
		<!-- 地图 -->
		<!-- <view class="aucMap" @click="openMap">
			<view class="aucMap_box">
				<view class="box_top">
					{{store.storeName}}
				</view>	
				<view class="box_bot">
					<view class="map_left">
						地址：{{store.address}}
					</view>
					<view class="map_right">
						<image src="https://hesen-gfn-public.oss-cn-shenzhen.aliyuncs.com/default/storeDetail-yellowMap.png" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		
		
		<!-- 详情 -->
		<view class="particulars">
			<view class="ql-editor">
			     <rich-text  :nodes="htmlText" style="width: 100%;"></rich-text>
			</view>
		</view>
		
		
		<view class="footBtn">
			<view class="btn" v-if="store.discountStatus==0">
				未开始
			</view>
			<view class="btn" @click="openMask" v-if="store.discountStatus==1">
				立即抢购
			</view>
			<view class="btnFinish" v-if="store.discountStatus==2">
				已结束
			</view>
			<view class="text">
				需用至尊免单券抢此权益
			</view>
		</view>
		
		
		<!-- 弹框 -->
		<view class="maskShang" v-if="modalFlag" @click="closeMask">
		
		</view>
		<view :class="modalFlag ? 'vip_modal vip_modal_active' : 'vip_modal'">
			<view class="vip_border_modal">
				
				<view class="xin_box_title">
					当前需要支付积分
					<view class="text_active">
						{{minPriceNum+num}}
					</view>
					
				</view>
				
				<view class="xin_box_con">
					<view class="left">
						<image src="https://imgs.ynz666.com/test/2024/09/19/NzQ3OTFiOTlhODY2ZWE1NDRiZjFkM2VlMmZlMmE4YjU=.png" mode="aspectFill" class="img" @click.stop="onReduce"></image>
					</view>
					<view class="cen">
						<view class="cen_top">
							立即加码
						</view>
						<view class="cen_bot">
							<view class="view1">
								{{num}}
							</view>
							<view class="view2">
								积分
							</view>
						</view>
					</view>
					<view class="right">
						<image src="https://imgs.ynz666.com/test/2024/09/19/YWY5ZjM0MzUwN2NmZmZhN2U3YTRiYTJkYTE3M2YyMGI=.png" mode="aspectFill" class="img" @click.stop="onAdd"></image>
					</view>
				</view>
		
				<view class="xin_box_btn" @click="confirmBid">
					确认出价
				</view>
				
				<image src="https://imgs.ynz666.com/test/2024/09/19/NmRlMGRkYThjOTQ0ZGY5ZTFjYTI2ZjY5Nzk0ZTI1NmY=.png" mode="aspectFill" class="dw_close" @click="closeMask"></image>
		
			</view>
		</view>
		
		<!-- 出价成功 -->
		<view class="maskFour" v-if="modalFree">
			<view class="maskFour_box">
				<image
					src="https://imgs.ynz666.com/test/storeInfo/YTBhOGUzNWI3NDY5YTNjZDNkMDg0YzY5NjFhYmYwMTQ=.png"
					mode="scaleToFill" class="free_img"></image>
					<!-- <image
						src="https://imgs.ynz666.com/2023/12/06/OTIyMTYyZjRlOTJjNTAwZWVlYTY5ZTg3YzMxMmU2MmM=.png"
						mode="scaleToFill" class="free_btn" @click="getFreeCard(1)"></image> -->
					<image
						src="https://imgs.ynz666.com/test/storeInfo/ZTRjZjcwYWY2MWJlMDlmNjIyMTBhMGE5ODc2YWUwOWM=.png"
						mode="scaleToFill" class="free_close" @click="closeMask"></image>
			</view>
		</view>
		
		
		<!-- 抢购成功弹 -->
		<view class="mask" v-if="friendModal">
			<view class="friendModal_box">
				<image src="https://imgs.ynz666.com/test/2024/09/19/MWRjOGNjN2VhZWRmODc0MWIwZmE1ZmNiZTE5ZDVhNGI=.png" mode="aspectFill" class="fri_img"></image>
				<view class="fri_box">
					<view class="top">
						<image src="https://imgs.ynz666.com/test/2024/09/19/MTdhMTM3YTYwNzNkZGIwMjg2N2FmMjA0MGNhYWU2Yzc=.png" mode="aspectFill" class="img"></image>
					</view>
					<view class="text_view1" v-if="store.isSuccess">
						恭喜您，抢购成功！
					</view>
					<view class="text_view2" v-if="store.isSuccess">
						获得{{store.productName}}
					</view>
					<view class="text_view1 text_view1Lose" v-if="!store.isSuccess">
						很遗憾本次抢购没有成功
					</view>
					<view class="text_view2 text_view2Lose" v-if="!store.isSuccess">
						还有更多抢购品等您去抢购哦
					</view>
					<view class="fri_btn" @click="goLook(store.isSuccess)">
						前往查看
					</view>
				</view>
				
				<view class="fot">
					<image src="https://imgs.ynz666.com/test/storeInfo/ZTRjZjcwYWY2MWJlMDlmNjIyMTBhMGE5ODc2YWUwOWM=.png" mode="aspectFill" class="img" @click="closeMask"></image>
				</view>
			</view>
		</view>
		
		
		<!-- 拍卖排行榜 -->
		<view class="rankingmask" v-if="rankingModal">
			<view class="rankingModal_box">
				<view class="fri_box">
					<view class="top">
						<image src="https://imgs.ynz666.com/test/2024/10/12/MGVhOTQzODZlODY1NGFmZjc3NGMxMzIwMmJmOWY0MjA=.png" mode="aspectFill" class="img"></image>
					</view>
					<view class="bot">
						<scroll-view :scroll-top="scrollTop" scroll-y="true" class="bot_scroll" @scrolltoupper="upper"
											@scrolltolower="lower" @scroll="scroll">
											
							<view class="item" v-for="(item,index) in rankList" :key="index">
								<view class="scr_rank" v-if="index!=0&&index!=1&&index!=2">
									{{index+1}}
								</view>
								<view class="scr_rank" v-if="index==0||index==1||index==2">
									<image src="https://imgs.ynz666.com/test/2024/09/23/ZDY4MWI4OTJkOGM0NDQzYTEzMTIxYjE1NjUxMTQ0MGE=.png" mode="aspectFill" class="scr_img" v-if="index==0"></image>
									<image src="https://imgs.ynz666.com/test/2024/09/23/MjQxOTI0ZGU0M2E5ZDFlN2RhN2EwMzZiMDRjYzY1MmM=.png" mode="aspectFill" class="scr_img" v-if="index==1"></image>
									<image src="https://imgs.ynz666.com/test/2024/09/23/OWIzMzM0MWQ3N2NjZjFjOTgyMTdjY2U3MDVkNGQzYTQ=.png" mode="aspectFill" class="scr_img" v-if="index==2"></image>
									<view class="rank_box">
										{{index+1}}
									</view>
								</view>
								<view class="scr_detail">
									<image :src="item.adminMemberAvatar" mode="aspectFill" class="avatar"></image>
									<view class="detail_right">
										<view class="name">
											{{item.adminMemberNickname}}
										</view>
										<view class="mes">
											当前抢购使用积分数{{item.bidAmount}}
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					
				</view>
				
				<view class="fot">
					<image src="https://imgs.ynz666.com/test/storeInfo/ZTRjZjcwYWY2MWJlMDlmNjIyMTBhMGE5ODc2YWUwOWM=.png" mode="aspectFill" class="img" @click="closeMask"></image>
				</view>
			</view>
		</view>
		
		<view class="maskTow" v-if="modalFlagTow">
			<view class="nomral-modal">
				<image
					src="https://imgs.ynz666.com/test/2024/11/04/ZjU4OTIxN2JiYjkwMTFiZmNkNDJiYWRjNzBhZThkZDU=.png"
					mode="aspectFill" class="tk_bjImg"></image>
				<view class="modal_box">
					<image
						src="https://imgs.ynz666.com/test/2023/08/14/YTI1NTk0ZmIwMTVmOGE1ZTc3YzIwZjIzNjQ4YWVlNTA=.png"
						mode="aspectFill" class="gb_img" @click.stop="closeMask"></image>
		      
					<view class="content_box">
						<view class="cont1">
							<image
								src="https://imgs.ynz666.com/test/2024/11/04/YTAxMzZmNDBjY2MzZGM2MTI0OTNlNGIzMDIzYjljZTQ=.png"
								mode="aspectFill" class="con_bj"></image>
							<view class="con_main">
								<view class="main_top">
									分享领券
								</view>
								<view class="main_bottom">
									<view class="bot_left">
										<view class="left_name">
											分享给新朋友
										</view>
										<view class="left_desc">
											新朋友领取，各得免单券＊1
										</view>
									</view>
									<view class="bot_right" @click="acquireCoupon(1)">
										立即去分享
									</view>
								</view>
							</view>
						</view>
						<view class="cont1 cont2">
							<image
								src="https://imgs.ynz666.com/test/2024/11/04/MGU2YzViNjhiZDJiYTMyYzU2MTA5ZjAxMzA4ZjE0OTA=.png"
								mode="aspectFill" class="con_bj"></image>
							<view class="con_main">
								<view class="main_top">
									商城买券
								</view>
								<view class="main_bottom">
									<view class="bot_left">
										<view class="left_name">
											购买更多免单券
										</view>
										<view class="left_desc">
											下楼走一走，免单天天有～
										</view>
									</view>
									<view class="bot_right" @click="acquireCoupon(2)">
										 立即前往
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- <view class="cont2">
						点击[立即分享]，分享邀请好友购买并使用核销后，即可获得50%返佣(系统自动到账)
					</view>
					<view class="cont3">
						<view class="btn">
							<image
								src="https://imgs.ynz666.com/test/2023/08/14/MmViMThlZWQzYzc1OWE5NzJlMDUwYWI1N2I1MjQ0M2Y=.png"
								mode="aspectFill" class="img"></image>
							<view class="btn_box">
								<text>立即分享</text>
								<button open-type="share"></button>
							</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		
		
		
		
		<!-- 打开规则弹框 -->
		<view class="rulemask" v-if="ruleModal">
			<view class="ruleModal_box">
				<view class="fri_box">
					<view class="top">
						抢购规则
					</view>
					<view class="bot">
						{{store.bidRuleDesc}}
					</view>
					
				</view>
				
				<view class="fot">
					<image src="https://imgs.ynz666.com/test/storeInfo/ZTRjZjcwYWY2MWJlMDlmNjIyMTBhMGE5ODc2YWUwOWM=.png" mode="aspectFill" class="img" @click="closeMask"></image>
				</view>
			</view>
		</view>
		
		</view>
		</view>
	</view>
</template>

<script>
	
	import QQMapWX from 'lib/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js';
	import Map from 'js_sdk/ms-openMap/openMap.js'
	var qqmapsdk = new QQMapWX({
		key: 'IYIBZ-3DC6U-HRYVF-2E3CJ-OSJDS-E5FDF' 
	});
	
	import { apiGetStoreDetail,auctionInstanceDetail,auctionBid,auctionBidRank} from '../../apis/index.js';
	
	import { apiAuctionDetail,apiAuctionBid,apiAuctionHistory } from '../../apis/my.js';
	import tipmodal from '../../components/tip-modal/tip-modal.vue';
	import http from '@/utils/request/http.js';
	import env from '@/env/index.js';
	import gongType from '@/utils/debounce.js'
	import { getTimertype, getTimestamp } from '@/utils/request/ActivityTime.js';
	import loading from '../../components/loading/loading.vue';
	// import gongType from '@/utils/debounce.js'
	import {subscribeMessage,RECEIVED_PLACE_ORDER_WIN_ID} from '@/utils/subMessage.js'
	var app = getApp();
	export default {
		data() {
			return {
				
				loading: true, //骨架屏
				posterArr:[
					'../../static/lazy_detail.png','../../static/lazy_detail.png','../../static/lazy_detail.png'
				],
				statusBarHeight: 0,
				windowHeight: 0,
				navBarHeight:0,
				bottomTabbar:0,
				menuButtonInfo:{},
				
				phoneLoginFlag:false,
				UserInfoFlag:false,
				inviteId:'',
				store_id: "",//详情id
				location: "",
				store: {
					discountStatus:0,
					timeStart:'',
					timeEnd:'',
					
					auctionTime:''
				},
				mineInfo:{},
				
				modalFlag: false,
				num: 0,
				
				friendModal:false,
				modalFree:false,
				
				rankingModal:false,//拍卖弹窗
				rankList:[],//拍卖列表
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				htmlText:'',
				minPriceNum:'',//最小出价数量
				timing:'',
				
				mapUpdataNum:1,//地图的更新次数
				ruleModal:false,//规则弹框
				
				modalFlagTow:false,
			}	
		},
		components:{
			tipmodal,
			loading,
		},
		onReady() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.navBarHeight =  uni.getMenuButtonBoundingClientRect().height +  ( uni.getMenuButtonBoundingClientRect().top - uni.getSystemInfoSync().statusBarHeight) * 2;
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.bottomTabbar = uni.getStorageSync('bottomTabbar');
			this.paddTop=this.statusBarHeight+this.navBarHeight
		},
		onLoad(options) {
			console.log(options,'storeDetail')
			let that = this;
			let store_id = null;
			that.location = app.globalData.latitude + "," + app.globalData.longitude;
			store_id = options.id;
			
			that.store_id=options.id
			
			console.log(that.location,"that.location")
			
			app.isLogin({},function(login){
			  that.getDetail(store_id, that.location);
				// that.MapDirection();
			})
			
		},
		onUnload(){
			console.log("离开")
			this.closeTime();
		},
		onHide(){
			this.closeTime();
		},
		onShow(){
			let that = this;
			that.mineInfo = uni.getStorageSync('mineInfo');
			
		 // discountStatus 0未开始notBegin  1正在进行中proceed 2已结束 finish
			// clearInterval(that.timing)
			// that.timing=setInterval(function(){
			// 	if(that.store.status==1){
			// 		that.getDetail(that.store_id);
			// 	}
			// },2000)
		},
		
		onPullDownRefresh(){
			let that = this;
			uni.showToast({
				title:'刷新中',
				icon:"loading",
				mask:true
			})
			setTimeout(() => {
				that.page = 1;
				that.shopPage = 1;
				that.commentList = [];
				that.shopList = [];
				that.getDetail(that.store_id, that.location);
				uni.hideNavigationBarLoading() //完成停止加载
				uni.stopPullDownRefresh() //停止下拉刷新
				uni.hideToast();
			},1500);
		},	
		
		methods: {
			// 获取券
			acquireCoupon(index){
				if(index==1){
					uni.navigateTo({
						url: `/pageE/sharedraw/sharedraw`
					});
				}else if(index==2){
					uni.switchTab({
						url:'/pages/integral/integral'
					})
				}else{
					uni.navigateBack({
						delta:1,
						fail() {
							uni.switchTab({
								url:'../index/index'
							})
						}
					})
				}
			},
			// goLook 前往查看
			goLook(index){
				if(index){
				uni.navigateTo({
					url: `/pageC/orderAll/orderAll`
				})
					// uni.switchTab({
					// 	url:'/pages/writeList/writeList'
					// })
					
				}else{
					uni.navigateBack({
						delta:1,
						fail() {
							uni.switchTab({
								url:'/pageE/auctionList/auctionList'
							})
						}
					})
				}
			},
			// 关闭定时
			closeTime(){
				clearInterval(this.timing)
			},
			// 确认出价
			confirmBid:gongType.debounce(function (e){
				let that=this
				// wx.requestSubscribeMessage({
				// 	tmplIds: ['BuFgfs-iqbphWXXRizj-pF7r52Ax4K4C7aoc4qjgaWI'],
				// 	success(res) {
				// 		if(res['BuFgfs-iqbphWXXRizj-pF7r52Ax4K4C7aoc4qjgaWI']=='accept'){
				// 			console.log('用户同意订阅')
				
				subscribeMessage([RECEIVED_PLACE_ORDER_WIN_ID]).then(()=>{
					let data={
						id:that.store_id,
						bidAmount:that.minPriceNum+that.num,
					}
					apiAuctionBid(data).then(resP=>{
						console.log(resP,"resPresPresP")
						if(resP.code==0){
							that.modalFlag=false;
							that.modalFree=true;
							that.num=0;
						}else{
							uni.showToast({
								title: resP.message,
								icon: 'none',
								duration:3000
							})
						}
// 						else if(resP.code==1010006||resP.code==1010007
// ||resP.code==1010009||resP.code==1130004){
							
// 							that.modalFlagTow=true
// 						}
						
					})
				})
							
				// 		}else{
				// 			console.log('用户拒绝订阅')
				// 		}
						
				// 	}
				// })
				
			}, 1000),
			// 打开排名榜
			openranking(){
				this.rankingModal= true;
				this.auctionBidRankFun();
			},
			// 排名接口
			auctionBidRankFun(){
				let that = this;
				let data={
					page:1,
					pageSize:10,
					pagination:true,
					logId:that.store_id
				}
				apiAuctionHistory(data).then(res=>{
					that.rankList=res.data.list
				})
			},
			// 打开规则
			openRule(){
				this.ruleModal= true;
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			closeMask() {
				this.modalFlag = false;
				this.friendModal = false;
				this.modalFree = false;
				this.rankingModal= false;
				this.ruleModal= false;
				this.modalFlagTow=false;
			},
			openMask() {
				
				this.modalFlag = true;
				
			},
			// 减
			onReduce() {
				if (this.num == 0) {
					return false
				}
				this.num -= 1
			},
			onAdd() {
				this.num += 1
			},
			phoneClick(){
				uni.makePhoneCall({
					phoneNumber: this.store.phone,
					success: function () {
					console.log("拨打电话成功！")
					},
					fail: function () {
					console.log("拨打电话失败！")
					}
				});
			},
			LoginInvite(login){
				let that = this;
				let inviteId = that.inviteId;
				that.mineInfo = login;
				that.btnText = login.vip_level>0?'立即预约':'开通会员';
				if(inviteId){
					app.isLogin({id:inviteId},function(res){
						that.mineInfo = res;
					});
				}
			},
			// 返回按钮
			tapToBack(page) {
				switch(page){
					case 'index':
						uni.switchTab({
							url:'../index/index'
						})
					break;
					case 'back':
						uni.navigateBack({
							delta:1,
							fail() {
								uni.switchTab({
									url:'../index/index'
								})
							}
						})
					break;
				}
			},
			// 接入微信客服
			WeixinServer(){
				console.log("打开客服")
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kf/' + "kfc11f5184d7762c658"
					},
					 corpId: 'ww106853c8ad050781',
				})
			},
			// 手机号授权
			onGetPhoneNumber(e){
				let that = this;
				app.GetMobile(e,function(e){
					// that.phoneLoginFlag = true;
					if(that.inviteId !==''){
						app.isLogin({id:that.inviteId},function(login){
							that.mineInfo = login;
							that.toBooking();
						});
					}else {
						app.getUserInfo(function(lRes){
							that.mineInfo = lRes;
							that.toBooking();
						})
					}
				});
			},
			// 用户地图
			MapDirection(){
				let that = this;
				// console.log(that.store.latitude,"that.store.latitude")
				qqmapsdk.direction({
					mode:'walking',
					tags:['LEAST_TIME'],
					from:{
						latitude:app.globalData.latitude,
						longitude:app.globalData.longitude
					},
					to:{
						latitude:that.store.latitude.split(',')[0],
						longitude:that.store.latitude.split(',')[1]
					},
					success(loc) {
						that.mapUpdataNum=2
						console.log(loc,"loc")
						// that.mapDuration = loc.result.routes[0].duration;
					}
				})
			},
			add(m){
			      return m<10?'0'+m:m 
			},
			format(shijianchuo)
			{
			    var time = new Date(shijianchuo);
			    var y = time.getFullYear();
			    var m = time.getMonth()+1;
			    var d = time.getDate();
			
			    var h = time.getHours();
			    var mm = time.getMinutes();
			    var s = time.getSeconds();
			    return this.add(h)+':'+this.add(mm);
			},
			// 倒计时时间到
			timeOut(){
				console.log('倒计时时间到')
				this.getDetail(this.store_id);
				
			},
			// 获取商家详情
			getDetail(s_id, location) {
				var that = this
				// uni.showLoading();
				// const params = {
				// 	store_id:  s_id,
				// 	location: location,
				// }
				
				apiAuctionDetail({
					id:s_id,
				}).then( res => {
					console.log(res,'商户详情')
					
					that.store = res.data;
					// that.htmlText = res.data.description.replace(/\<img/g, "<img style='width: 100% !important;vertical-align:middle !important;' max-width='100% !important;'")

					that.store.discountStatus=getTimertype(res.data.serverTime,res.data.startTime,res.data.endTime)
					
					that.store.timeStart=getTimestamp(res.data.startTime.replace(new RegExp("-", "gm"),"/")) -Date.parse(res.data.serverTime.replace(new RegExp("-", "gm"),"/"))
					that.store.timeEnd=getTimestamp(res.data.endTime.replace(new RegExp("-", "gm"),"/")) -Date.parse(res.data.serverTime.replace(new RegExp("-", "gm"),"/"))
					
					
					// 本场抢购时间
					that.store.auctionTime=that.format(res.data.startTime)+'-'+that.format(res.data.endTime)
					that.loading = false;
					
					
					// 当前所需要出的价格
					if(that.store.finalPrice==0){
						that.minPriceNum=that.store.mBasePrice
					}else{
						that.minPriceNum=that.store.finalPrice+that.store.mMinBidPrice
					}
					
					
					// if(that.store.highestPrice==0){
					// 	that.minPriceNum=that.store.currentCouponNum
					// }else{
					// 	that.minPriceNum=that.store.currentCouponNum+that.store.highestPrice
					// }
					
					// 判断当前活动结束之后弹框 status  1是未开始，2是进行中，3是结束
					
					// auctionStatus 0没有参与活动 (1: 预约中, 2: 抢购中, 3: 抢购成功, 4: 抢购失败)
					
					if(res.data.status==3){
						console.log("关闭关闭关闭关闭")
						that.closeTime();
						that.friendModal=true;
					}
					
					
					// console.log(filterArr,"filterArr")
					// console.log(that.minPriceNum,"that.minPriceNum")
					
					console.log(that.store,"that.store")
					
					// if(that.mapUpdataNum==1){
					// 	that.MapDirection();
					// }
					
					
					
					uni.hideLoading();
					uni.setNavigationBarTitle({
						title:res.name
					})
				}).catch(err=>{
					uni.showToast({
						title:err.message?err.message:'获取商家信息失败',
						icon:'none',
						success() {
							// setTimeout(function(){
							// 	uni.switchTab({
							// 		url:'/pages/index/index'
							// 	})
							// },2000)
						}
					})
				});
			},
			// 打开地图 
			openMap() {
				Map.openMap( Number(this.store.latitude.split(',')[0]),Number(this.store.latitude.split(',')[1]), this.store.address, "gcj02");//wgs84
			},
			
			
			
			
			// 评论图片预览
			imagePreview(index,imgArr){
				uni.previewImage({
					urls:imgArr,
					current:imgArr[index],
				})
			},
		},
		
		onShareAppMessage(res) {
			// let shareTips = '邀请你和我一起来' + this.store.name;
			// if(this.mineInfo.nick_name.indexOf('Gfner')<0){//授权过头像
			// 	return {
			// 		title:shareTips,
			// 		imageUrl : '',
			// 		//this.store.thumb_img
			// 		path:'/pages/storeDetail/storeDetail?store_id='+ this.store_id + '&inviteId='+ this.mineInfo.id + '&shopId='+ this.shopList[0].id
			// 	}
			// }else {
			// 	return {
			// 		title:shareTips,
			// 		imageUrl : '',
			// 		path:'/pages/storeDetail/storeDetail?store_id='+ this.store_id + '&shopId='+ this.shopList[0].id
			// 	}
			// }
		},
		
		onReachBottom() {
			if(!this.isLastPage && this.curNav == 1003){
				this.page++;
				this.getComment();
			}
		},
	}
</script>
<style>
	page {
		background: #F4F6FA;
	}
</style>
<style lang="scss" sc>
	page{
		background: #F4F4F4;
	}
.top-box {
	position: fixed;
	top: 0;left: 0;
	width: 100vw;
	z-index: 10;
	background: #fff;
}



.navTopBox {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	.left-button-box {
		width: 160rpx;
		background-color: rgba(255,255,255,0.5);
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-left: 30rpx;
		border: 1rpx solid rgba(224, 224, 224, 0.6);
		position: absolute;
		left: 30rpx;
		.line {
			height: 30rpx;
			background: #CCCCCC;
			width: 1rpx;
		}
		
		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 20rpx;
		}
	}
	.right-button-box{
		font-size: 28rpx;
		font-weight: bold;
	}
	
}
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	width: 100vw;
}
.store-box {
	background-color: #fff;
	width: 650rpx;
	padding: 30rpx;
	border-radius: 64rpx;
	margin-bottom: 20rpx;
}
.coupon-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #141414;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.down-arrow {
	    display :inline-block;
	    position: relative;
	    width: 40rpx;
	    height: 30rpx;
	    margin-right: 20rpx;
	}
	
	.down-arrow::after {
	    display: inline-block;
	    content: " ";
	    height: 18rpx;
	    width: 18rpx;
	    border-width: 0 2rpx 2rpx 0;
	    border-color: #999999;
	    border-style: solid;
	    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	    transform-origin: center;
	    transition: transform .3s;
	    position: absolute;
	    top: 50%;
	    right: 10rpx;
	    margin-top: -10rpx;
	}
	// 加上active旋转成 上箭头
	.down-arrow.active::after {
	    transform-origin: center;
	    transform: rotate(-135deg);
	    transition: transform .3s;
	}
}
// banner
.banner {
	width: 100%;
	height: 600rpx;
	position: relative;
	.swiper{
		height: 600rpx;
	}
	.item{
		position:relative;
		display: block;
		width: 100%;
		height: 600rpx;
		margin: 0 auto;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
}


// 倒计时信息
.title{
	width: 100%;
	height: 128rpx;
	position: relative;
	margin-top: -32rpx;
	.backgImg_img{
		width: 100%;
		height: 128rpx;
	}
	.title_box{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			padding-left: 54rpx;
			.left_view1{
				font-weight: 800;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
			}
			.left_view2{
				padding-top: 4rpx;
				font-weight: 500;
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
		.right{
			padding-right: 34rpx;
			.right_view1{
				font-weight: 400;
				font-size: 20rpx;
				color: #6C3018;
			}
			.right_view2{
				margin-top: 8rpx;
				width: 246rpx;
				height: 62rpx;
				background: linear-gradient( 180deg, #FEF8DE 0%, #FEE692 100%);
				box-shadow: 0rpx 4rpx 16rpx 0rpx #EC311E;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #6C3018;
			}
		}
		.dw{
			position: absolute;
			top: -5rpx;
			left: 0;
			width: 74rpx;
			height: 50rpx;
		}
	}
}

.message{
	width: 100%;
	height: 318rpx;
	background: #fff;
	.message_box{
		padding: 32rpx 50rpx 18rpx;
		.mes_title{
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}
		.mes_con{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 28rpx;
			.con_item{
				display: flex;
				flex-direction: column;
				align-items: center;
				.view1{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.view2{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					padding-top: 4rpx;
				}
			}
			.segmentation{
				width: 2rpx;
				height: 46rpx;
				background: #F2F2F2;
			}
		}
		.mes_fot{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 36rpx;
			.left{
				.view1{
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.view2{
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.right{
				width: 182rpx;
				height: 48rpx;
				background: #FEFCFD;
				border: 2rpx solid #FD455A;
				font-weight: 400;
				font-size: 24rpx;
				color: #FD455A;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.auctmes{
	width: 100%;
	background: #fff;
	border-top: 18rpx solid #F8F8F8;
	border-bottom: 18rpx solid #F8F8F8;
	.auctmes_box{
		padding: 22rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		.item{
			width: 224rpx;
			height: 114rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			border: 2rpx solid #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.item_top{
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
			.item_bot{
				font-weight: 500;
				font-size: 28rpx;
				color: #303030;
			}
			.item_bot2{
				color: #FD576A;
			}
		}
		.item:nth-child(4),.item:nth-child(5),.item:nth-child(6){
			margin-top: 18rpx;
		}
	}
}

.aucMap{
	width: 100%;
	background: #fff;
	// height: 200rpx;
	border-bottom: 18rpx solid #F8F8F8;
	.aucMap_box{
		padding: 42rpx 40rpx;
		display: flex;
		flex-direction: column;
		.box_top{
			font-weight: 500;
			font-size: 28rpx;
			color: #303030;
		}
		.box_bot{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;
		}
		.map_left{
			font-weight: 500;
			font-size: 28rpx;
			color: #303030;
			padding-right: 20rpx;
			flex: 1;
		}
		.map_right{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: #FFF1DC;
			image {
				width: 36rpx;height: 36rpx;
				margin-top: 32rpx;
				margin-left: 32rpx;
			}
		}
	}
}

.particulars{
	width: 100%;
	background: #fff;
	padding-top: 40rpx;
	overflow: hidden;
	.content-select-copy {
	  -webkit-user-select: text;
	  -moz-user-select: text;
	  -ms-user-select: text;
	  user-select: text;
	}
	.ql-editor{
		width: 100% !important;
		padding: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		img{
			max-width: 100%;
			height: auto;
			display: block;
			margin: 0 auto;
		}
	}
	
}

.footBtn{
	width: 100%;
	height: 190rpx;
	background: #fff;
	position: fixed;
	bottom: 0;
	box-shadow: 0rpx -8rpx 22rpx 0rpx #F7F7F7;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.btn{
		margin-top: 20rpx;
		width: 704rpx;
		height: 104rpx;
		background: linear-gradient( #FF2180 0%, #FE275F 100%);
		border-radius: 52rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btnFinish{
		margin-top: 20rpx;
		width: 704rpx;
		height: 104rpx;
		background: linear-gradient( #8F8F8F 0%, #BCBCBC 100%);
		border-radius: 52rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.text{
		font-weight: 400;
		font-size: 22rpx;
		color: #AFAFAF;
		padding-top: 8rpx;
	}
}

.maskShang {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 8;
	}

	.vip_modal {
		z-index: 99;

	}

	.vip_modal {
		position: fixed;
		bottom: -100vh;
		left: 0;
		padding: 0;
		width: 100%;

		.vip_border_modal {
			padding: 46rpx 30rpx;
			border-radius: 24rpx;
			background: #fff;
		}

		.vip_modal_title1 {
			font-size: 44rpx;
		}
	}

	.vip_tip {
		margin-top: 24rpx;
		margin: 36rpx 0 28rpx;
		font-size: 24rpx;
		text-align: center;
		color: #666666;
	}

	.xin_box_title {
		display: flex;
		align-items: baseline;
		justify-content: center;
		font-weight: 400;
		font-size: 24rpx;
		color: #010208;
		.text_active{
			font-weight: 600;
			font-size: 56rpx;
			color: #E70F45;
			padding: 0 4rpx;
		}
	}
	
	.dw_close{
		width: 72rpx;
		height: 68rpx;
		position: absolute;
		right: 0;
		top: 0;
	}
	
	.xin_box_con{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 44rpx;
		.left{
			.img{
				width: 86rpx;
				height: 86rpx;
			}
		}
		.cen{
			width: 342rpx;
			height: 176rpx;
			background: linear-gradient( 270deg, #FDFDFD 0%, #F7F7F7 52%, #FFFFFF 100%);
			
			.cen_top{
				font-weight: 400;
				font-size: 24rpx;
				color: #CAC5C5;
				padding-top: 18rpx;
			}
			.cen_bot{
				width: 100%;
				display: flex;
				align-items: baseline;
				justify-content: center;
				.view1{
					font-weight: 600;
					font-size: 72rpx;
					color: #E70F45;
				}
				.view2{
					font-size: 28rpx;
					color: #E70F45;
				}
			}
		}
		.right{
			.img{
				width: 86rpx;
				height: 86rpx;
			}
		}
	}

	.xin_box_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
		width: 100%;
		height: 104rpx;
		background: linear-gradient( #FF2180 0%, #FE275F 100%);
		border-radius: 52rpx;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	
	.login_modal {
		background: #FFFFFF;
		border-radius: 12px;
		text-align: center;
		top: 50%;
		left: 65rpx;
		margin-top: -300rpx;
		width: 520rpx;
	}
	
	.vip_modal_active {
		bottom: 0;
		transition: 0.6s;
	}
	
	// 弹窗
	.mask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	
		background-color: rgba(0, 0, 0, 0.65);
	
		
		.friendModal_box {
			width: 648rpx;
			height: 498rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -331rpx;
			.fri_img{
				width: 648rpx;
				height: 498rpx;
			}
			.fri_box{
				width: 648rpx;
				height: 498rpx;
				position: absolute;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.top {
					width: 100%;
					height: 228rpx;
					margin-top: -100rpx;
					display: flex;
					justify-content: center;
					.img {
						width: 220rpx;
						height: 228rpx;
					}
				}
				.text_view1{
					font-weight: 600;
					font-size: 36rpx;
					color: #DE133F;
					padding: 26rpx 0;
				}
				.text_view2{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
				.text_view1Lose{
					color: #333333;
				}
				.text_view2Lose{
					color: #8B8C8B;
				}
				.fri_btn{
					width: 498rpx;
					height: 104rpx;
					background: linear-gradient( #FF227C 0%, #FE275F 100%);
					border-radius: 52rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 600;
					font-size: 36rpx;
					color: #FFFFFF;
					margin-top: 42rpx;
				}
			}
			
			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -140rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.img{
					width: 63rpx;
					height: 63rpx;
				}
			}
	
			
		}
	
		.nomral-modal {
			text-align: center;
			width: 600rpx;
			padding-bottom: 48rpx;
			overflow: hidden;
	
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
	
			.bg-top {
				width: 51%;
				height: 165rpx;
				background: #FA6400;
				top: 0;
				border-radius: 0 0 0% 80%;
				position: absolute;
				z-index: -1;
			}
	
			.left {
				left: 0;
			}
	
			.right {
				right: 0;
				border-radius: 0 0 80% 0% !important;
			}
	
			image {
				width: 170rpx;
				height: 170rpx;
				display: block;
				margin: 0 auto;
				margin-top: 54rpx;
				z-index: 1;
				margin-bottom: 14rpx;
			}
	
			.nomral-txt {
				width: 482rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				line-height: 50rpx;
			}
	
			.modal-btn {
				background-color: #FA6400;
			}
	
			.nomral-title {
				font-size: 28rpx;
				color: #141414;
				line-height: 40rpx;
			}
	
			.nomral-vip {
				font-size: 38rpx;
				font-weight: bold;
				color: #141414;
				line-height: 54rpx;
			}
	
			.nomral-btn {
				margin: 0 auto;
				margin-top: 54rpx;
			}
	
			.nomral-tip {
				text-align: center;
				width: 424rpx;
				margin: 0 auto;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 14rpx;
			}
	
			.modalBtnAll {
				margin: 54rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.btnLeft {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
	
				.btnRight {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}
		}
	}
	
	// 弹窗
	.rankingmask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	
		background-color: rgba(0, 0, 0, 0.65);
	
		
		.rankingModal_box {
			width: 648rpx;
			height: 855rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -331rpx;
			.fri_img{
				width: 648rpx;
				height: 855rpx;
			}
			.fri_box{
				width: 648rpx;
				height: 855rpx;
				position: absolute;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.top {
					width: 100%;
					height: 264rpx;
					position: relative;
					.img {
						width: 100%;
						height: 264rpx;
						position: absolute;
						top: 0;
					}
				}
				.bot{
					width: 100%;
					height: 590rpx;
					background: #fff;
					border-radius: 16rpx;
					margin-top: -30rpx;
					position: relative;
				  .bot_scroll{
						width: 100%;
						height: 590rpx;
						.item{
							margin: 0 16rpx;
							height: 118rpx;
							display: flex;
							align-items: center;
							border-bottom: 1rpx solid #F7F7F7;
							.scr_rank{
								width: 48rpx;
								height: 44rpx;
								margin-left: 26rpx;
								font-weight: 800;
								font-size: 28rpx;
								color: #2C2C2C;
								position: relative;
								display: flex;
								align-items: center;
								justify-content: center;
								.scr_img{
									width: 48rpx;
									height: 44rpx;
								}
								.rank_box{
									width: 48rpx;
									height: 44rpx;
									position: absolute;
									display: flex;
									align-items: center;
									justify-content: center;
									top: 0;
									padding-top: 6rpx;
								}
							}
							.scr_detail{
								display: flex;
								align-items: center;
								padding-left: 22rpx;
								.avatar{
									width: 72rpx;
									height: 72rpx;
									border-radius: 50%;
								}
								.detail_right{
									padding-left: 32rpx;
									.name{
										font-weight: 500;
										font-size: 28rpx;
										color: #373737;
									}
									.mes{
										font-weight: 400;
										font-size: 24rpx;
										color: #B9B9B9;
									}
								}
							}
						}
					}
				}
				
			}
			
			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -140rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.img{
					width: 63rpx;
					height: 63rpx;
				}
			}
	
			
		}
	
		.nomral-modal {
			text-align: center;
			width: 600rpx;
			padding-bottom: 48rpx;
			overflow: hidden;
	
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
	
			.bg-top {
				width: 51%;
				height: 165rpx;
				background: #FA6400;
				top: 0;
				border-radius: 0 0 0% 80%;
				position: absolute;
				z-index: -1;
			}
	
			.left {
				left: 0;
			}
	
			.right {
				right: 0;
				border-radius: 0 0 80% 0% !important;
			}
	
			image {
				width: 170rpx;
				height: 170rpx;
				display: block;
				margin: 0 auto;
				margin-top: 54rpx;
				z-index: 1;
				margin-bottom: 14rpx;
			}
	
			.nomral-txt {
				width: 482rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				line-height: 50rpx;
			}
	
			.modal-btn {
				background-color: #FA6400;
			}
	
			.nomral-title {
				font-size: 28rpx;
				color: #141414;
				line-height: 40rpx;
			}
	
			.nomral-vip {
				font-size: 38rpx;
				font-weight: bold;
				color: #141414;
				line-height: 54rpx;
			}
	
			.nomral-btn {
				margin: 0 auto;
				margin-top: 54rpx;
			}
	
			.nomral-tip {
				text-align: center;
				width: 424rpx;
				margin: 0 auto;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 14rpx;
			}
	
			.modalBtnAll {
				margin: 54rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.btnLeft {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
	
				.btnRight {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}
		}
	}


.maskFour {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.65);
	
		.maskFour_box {
			width: 686rpx;
			overflow: hidden;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -343rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.free_img {
				width: 686rpx;
				height: 474rpx;
			}
			// .free_btn{
			// 	width: 361rpx;
			// 	height: 88rpx;
			// 	margin: 30rpx 0 25rpx;
			// }
			.free_close{
				width: 63rpx;
				height: 63rpx;
			}
		}
	}




.rulemask {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
	
		background-color: rgba(0, 0, 0, 0.65);
	
		
		.ruleModal_box {
			width: 648rpx;
			height: 855rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -331rpx;
			.fri_img{
				width: 648rpx;
				height: 855rpx;
			}
			.fri_box{
				width: 648rpx;
				height: 855rpx;
				position: absolute;
				top: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				.top {
					width: 100%;
					height: 164rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 30rpx;
					font-weight: bold;
				}
				.bot{
					height: 590rpx;
					background: #fff;
					border-radius: 16rpx;
					overflow-y: auto;
					padding: 0 24rpx;
					line-height: 50rpx;
					font-size: 24rpx;
				}
				
			}
			
			.fot {
				position: absolute;
				height: 80rpx;
				bottom: -140rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.img{
					width: 63rpx;
					height: 63rpx;
				}
			}
	
			
		}
	
		.nomral-modal {
			text-align: center;
			width: 600rpx;
			padding-bottom: 48rpx;
			overflow: hidden;
	
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -300rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
	
			.bg-top {
				width: 51%;
				height: 165rpx;
				background: #FA6400;
				top: 0;
				border-radius: 0 0 0% 80%;
				position: absolute;
				z-index: -1;
			}
	
			.left {
				left: 0;
			}
	
			.right {
				right: 0;
				border-radius: 0 0 80% 0% !important;
			}
	
			image {
				width: 170rpx;
				height: 170rpx;
				display: block;
				margin: 0 auto;
				margin-top: 54rpx;
				z-index: 1;
				margin-bottom: 14rpx;
			}
	
			.nomral-txt {
				width: 482rpx;
				text-align: center;
				margin: 0 auto;
				font-size: 28rpx;
				font-weight: bold;
				color: #141414;
				line-height: 50rpx;
			}
	
			.modal-btn {
				background-color: #FA6400;
			}
	
			.nomral-title {
				font-size: 28rpx;
				color: #141414;
				line-height: 40rpx;
			}
	
			.nomral-vip {
				font-size: 38rpx;
				font-weight: bold;
				color: #141414;
				line-height: 54rpx;
			}
	
			.nomral-btn {
				margin: 0 auto;
				margin-top: 54rpx;
			}
	
			.nomral-tip {
				text-align: center;
				width: 424rpx;
				margin: 0 auto;
				font-size: 20rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 14rpx;
			}
	
			.modalBtnAll {
				margin: 54rpx 30rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
	
				.btnLeft {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
	
				.btnRight {
					width: 260rpx;
					background-color: #FA6400;
					height: 88rpx;
					border-radius: 44rpx;
					text-align: center;
					color: #fff;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}
		}
	}
	
	// 弹窗
	.maskTow {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, 0.65);
	
		.nomral-modal {
			text-align: center;
			width: 722rpx;
			padding-bottom: 48rpx;
			// overflow: hidden;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -361rpx;
			border-radius: 24rpx;
	
			.tk_bjImg {
				width: 100%;
				height: 819rpx;
			}
	
			.modal_box {
				position: absolute;
				top: 0;
				width: 722rpx;
				height: 819rpx;
	
				.gb_img {
					position: absolute;
					left: 322rpx;
					bottom: -70rpx;
					width: 52rpx;
					height: 52rpx;
				}
				.content_box{
					padding: 393rpx 0 0;
					margin: 0 43rpx;
				}
				.cont1 {
					width: 571rpx;
					height: 183rpx;
					position: relative;
					margin: 0 auto;
					.con_bj{
						width: 573rpx;
						height: 185rpx;
					}
					.con_main{
						width: 573rpx;
						height: 185rpx;
						position: absolute;
						top: 0;
						left: 0;
						.main_top{
							width: 176rpx;
							height: 48rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 500;
							font-size: 28rpx;
							color: #FEDDBB;
						}
						.main_bottom{
							// width: 573rpx;
							height: 137rpx;
							display: flex;
							align-items: center;
							margin: 0 20rpx 0 30rpx;
							justify-content: space-between;
							.bot_left{
								display: flex;
								flex-direction: column;
								align-items: baseline;
								.left_name{
									font-weight: 600;
									font-size: 32rpx;
									color: #B81A1A;
								}
								.left_desc{
									font-weight: 400;
									font-size: 26rpx;
									color: #873811;
								}
							}
							.bot_right{
								display: flex;
								align-items: center;
								justify-content: center;
								width: 191rpx;
								height: 60rpx;
								background: #D7361E;
								border-radius: 30rpx;
								font-weight: 600;
								font-size: 26rpx;
								color: #FFDECE;
							}
						}
					}
				}
				.cont2{
					margin-top: 20rpx;
				}
			}
		}
	}
</style>
